<template>
    <div id="login">
        <form action="" class="loginForm">
            <h1>登录</h1>
            <div class="loginBar">
                <input type="text" placeholder="请输入手机号">
            </div>
            <div class="loginBar">
                <x-button class="getValidCode" @click.native="getValidCode" 
                        mini 
                        :disabled="validCodeLoading" >{{timer}}获取验证码</x-button>
                <input type="text" placeholder="请输入验证码" class="validCode" v-model="validCode">
            </div>
            <x-button type="primary" @click="loginSubmit">登录</x-button>
        </form>
    </div>
</template>

<script>
import { Countup, XButton } from 'vux';
export default {
    components:{
        Countup,
        XButton
    },
    name: 'app',
    data(){
        return{
            mobile:'',
            timer:'',
            validCode:'',
            validCodeLoading:false,
        }
    },
    methods:{
        // 获取验证码
        getValidCode(){
            this.validCodeLoading = true;
            this.$vux.loading.show({
                text: ' '
            })
            let t;
            setTimeout(()=>{
                // 隐藏loading
                this.$vux.loading.hide();
                this.validCode = parseInt(Math.random()*1000000);
                this.timer = 60;
                t = setInterval(()=>{
                    if( this.timer===0 ){
                        this.validCodeLoading = false;
                        clearInterval(t);
                        this.timer='';
                    }else{
                        this.timer--;
                    }
                },1000);
            },2000);
            return false;
        },
        loginSubmit(){
            alert('hello');
        }
    }
}
</script>

<style lang="scss">
@import '../assets/sass/mixin.scss';
#login {
    height: 100%;
    background: url(../assets/images/bg.png) center;
    background-size: cover;
    padding: 0 .5rem;
    overflow: hidden;
    h1{
        text-align: center;
        padding: rem(50px) 0;
        color: #fff;
        font-weight: normal;
        text-shadow: 1px 1px 7px rgba(#000,.4);
    }
}
.loginForm{
    margin-top: 20vh;
    padding: 0rem .5rem 1.5rem .5rem;
    // background: rgba(#fff,.4);
    // border: 1px solid rgba(#fff,.7);
    border-radius: 5px;
}
.loginBar{
    padding-bottom: rem(30px);
    input{
        height: rem(70px);
        border-radius: 4px;
        padding: 5px;
        box-sizing: border-box;
        width: 100%;
    }
    .validCode{
        width: 55%;
    }
    .getValidCode{
        float: right;
        padding: 0 10px;
        width: 43%;
        height: rem(70px);
        font-size: rem(30px);
    }
}
</style>
